<template>
  <div class="home">
    <left-menu :widthClass="$store.state.collapsed" />
    <div :class="{'home__right': true, 'menu-unfold': $store.state.collapsed}">
      <slider-nav />
      <router-view />
    </div>
  </div>
</template>

<script>
import SliderNav from '@/components/sliderNav'
import LeftMenu from '@/components/menu.vue'

export default {
  components: {
    SliderNav,
    LeftMenu
  },
  data () {
    return {
    }
  },
  methods: {
  },
  mounted () {
    const role = this.$store.state.user.role
    if (this.$route.name === 'Home') {
      if (role == 2 || role == 1) {
        this.$router.replace({ name: 'bookList' })
      } else if (role == 3) {
        this.$router.replace({ name: 'userList' })
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '../assets/css/index.less';

.home {
  // height: 720px;
  .home__right {
    margin-left: 289px;
    transition: margin-left 0.3s;

    &.menu-unfold {
      margin-left: 64px;
    }
  }
}
</style>
